<template>
  <div class="ck-ranking-progress">
    <div class="pro-flex">
        <div class="pro-left">
          <span class="left-text" v-if="ranking>=3">{{ranking + 1}}</span>
          <img v-if="ranking<3" class="left-img" :src="topImgData[ranking]" />
        </div>
        <div class="pro-centent">
          <div class="top-name">
            <div class="name">{{item.name}}</div>
             <div class="value">{{item.value}}</div>
          </div>
          <div class="progress-none" :style="{background:color}">
            <div class="progress-has" :style="{background:colorAction,width:item.percentage}"></div>
          </div>
        </div>

    </div>
  </div>
</template>

<script>
  export default{
    name:"ck_ranking_progress",
    data(){
      return{
        topImgData:['http://central.hld110.com/up/photo/15ea248fe17f16.png',
        'http://central.hld110.com/up/photo/15ea248fe17f16.png',
        'http://central.hld110.com/up/photo/15ea248fe17f16.png',
        ],
      }
    },
    props:{
      item:{
        type:Object,
        default:{}
      },
      //不是100%的颜色
      color:{
        type:String,
        default:"#eeeeee"
      },
      //进度条百分比的颜色
      colorAction:{
        type:String,
        default:"#835eea"
      },
      //当前的排行索引
      ranking:{
        type:Number,
        default:0,
      }
    }
  }
</script>

<style scoped lang="stylus">
  .ck-ranking-progress{
    width:100%;
    background:#FFFFFF;
    line-height:1.3;
    .pro-flex{
      display:flex;
      justify-content:flex-start;
      align-items:flex-start;
      .pro-left{
        flex-grow:0;
        width:26px;
        min-width:26px;
        max-width:26px;
        text-align:center;
        .left-img{
          height:28px;
        }
        .left-text{
          font-size:10px;
          color:#808080;
          vertical-align:text-top;
        }
      }
      .pro-centent{
        flex-grow:1;
        padding-left:6px;
        .top-name{
          display:flex;
          justify-content:space-between;
          align-items:flex-end;
          .name{
            color:#000000;
            font-size:12px;
            font-weight:bold;
          }
          .value{
            color:#805deb;
            font-size:10px;
          }
        }
        .progress-none{
          width:100%;
          height:10px;
          background:#eeeeee;
          border-radius:10px 10px;
          position:relative;
          .progress-has{
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            width:0;
            height:10px;
            border-radius:10px 10px;
            background:#835eea;
            transition:width 0.2s;
          }
        }
      }
    }
  }
</style>
